<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="任务名称" prop="jobName">
        <el-input v-model="queryParams.jobName" placeholder="请输入任务名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="任务组名" prop="jobGroup">
        <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable style="width: 240px">
          <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="执行状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择执行状态" clearable style="width: 240px">
          <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="执行时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" style="height: 28px;">
      
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean('day')">1天前</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean('week')">1周前</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean('month')">1月前</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean('all')">清空</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['monitor:job:export']">导出</el-button>
          <el-button type="warning" plain icon="el-icon-close" size="mini" @click="handleClose">关闭</el-button>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" style="margin-left: 10px;"></right-toolbar>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean('week')">1周前</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean('month')">1月前</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean('all')">清空</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['monitor:job:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-close" size="mini" @click="handleClose">关闭</el-button>
      </el-col> -->
      <pagination v-show="total > 0" layout="prev, pager, next" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.page_size"
      @pagination="getList" style="position: absolute;right: 0;width: 450px;" />
    </el-row>
    
    <el-table v-loading="loading" :data="jobLogList" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form inline class="table-expand" label-width="170px">
            <el-form-item label="重试次数:">
              <span>{{ scope.row.retry_times }} </span>
            </el-form-item>
            <el-form-item label="cron表达式:">
              <span>{{ scope.row.spec }}</span>
            </el-form-item>
            <el-form-item label="命令:">
              <span>{{ scope.row.command }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="日志编号" width="80" align="center" prop="id" />
      <el-table-column label="任务ID" width="80" align="center" prop="task_id" />
      <el-table-column label="任务名称" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="执行方式" align="center" prop="protocol" :formatter="formatProtocol" width="100" />
      <el-table-column label="任务节点" align="center" prop="任务节点" width="280" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-html="scope.row.hostname">{{scope.row.hostname}}</div>
        </template>
      </el-table-column>
      <el-table-column label="执行时长" width="250">
        <template slot-scope="scope">
          执行时长: {{ scope.row.total_time > 0 ? scope.row.total_time : 1 }}秒<br>
          开始时间: {{ parseTime(scope.row.start_time) }}<br>
          <span v-if="scope.row.status !== 1">结束时间: {{ parseTime(scope.row.end_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          <span style="color:red" v-if="scope.row.status === 0">失败</span>
          <span style="color:green" v-else-if="scope.row.status === 1">执行中</span>
          <span v-else-if="scope.row.status === 2">成功</span>
          <span style="color:#4499EE" v-else-if="scope.row.status === 3">取消</span>
        </template>
      </el-table-column>
      <el-table-column label="执行结果" align="left">
        <template slot-scope="scope">
          <el-button type="success" v-if="scope.row.status === 2" @click="showTaskResult(scope.row)">查看结果</el-button>
          <el-button type="warning" v-if="scope.row.status === 0" @click="showTaskResult(scope.row)">查看结果</el-button>
          <el-button type="danger" v-if="scope.row.status === 1 && scope.row.protocol === 2"
            @click="stopTask(scope.row)">停止任务
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 调度日志详细 -->
    <el-dialog title="调度日志详细" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
            <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
            <el-form-item label="执行时间：">{{ form.createTime }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行状态：">
              <div v-if="form.status == 0">正常</div>
              <div v-else-if="form.status == 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="form.status == 1">{{ form.exceptionInfo }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="任务执行结果" :visible.sync="dialogVisible">
        <div>
          <pre>{{currentTaskResult.command}}</pre>
        </div>
        <div>
          <pre>{{currentTaskResult.result}}</pre>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import * as taskApi from "@/api/monitor/task";

export default {
  name: "JobLog",
  dicts: [],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 调度日志表格数据
      jobLogList: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        page_size: 20,
        page: 1,
        task_id: '',
        protocol: '',
        status: '',
        day: ''
      },
      statusList: [
        {
          value: '1',
          label: '失败'
        },
        {
          value: '2',
          label: '执行中'
        },
        {
          value: '3',
          label: '成功'
        },
        {
          value: '4',
          label: '取消'
        }
      ],
      dialogVisible: false,
      currentTaskResult: {
        command: '',
        result: ''
      },

    };
  },
  created() {
    if (this.$route.query.jobId > 0) {
      this.queryParams.task_id = this.$route.query.jobId
    }
    this.getList();
  },
  activated(){
    if (this.$route.query.jobId > 0) {
      this.queryParams.task_id = this.$route.query.jobId
    }
    this.getList();
  },
  methods: {
    stopTask (item) {
      taskApi.stopTask({id:item.id, task_id:item.task_id}).then(response => {
        this.$modal.msgSuccess("停止成功");
        this.getList();
      })

    },
    showTaskResult(item) {
      this.dialogVisible = true
      this.currentTaskResult.command = item.command
      this.currentTaskResult.result = item.result
    },
    formatProtocol(row, col) {
      if (row[col.property] === 1) {
        return 'http'
      }
      return 'shell'
    },
    /** 查询调度日志列表 */
    getList() {
      this.loading = true;
      taskApi.listJobLog(this.queryParams).then(response => {
        this.jobLogList = response.data.data;
        this.total = response.data.total;
        this.loading = false;
      }
      );
    },
    // 返回按钮
    handleClose() {
      const obj = { path: "/monitor/job" };
      this.$tab.closeOpenPage(obj);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.jobLogId);
      this.multiple = !selection.length;
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.open = true;
      this.form = row;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const jobLogIds = this.ids;
      this.$modal.confirm('是否确认删除调度日志编号为"' + jobLogIds + '"的数据项？').then(function () {
        return delJobLog(jobLogIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 清空按钮操作 */
    handleClean(command) {
      this.$modal.confirm('是否确认删除调度日志数据项？').then(function () {
        return taskApi.cleanJobLog(command);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("清空成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/monitor/jobLog/export', {
        ...this.queryParams
      }, `log_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .is-background{
  top:-17px;
  left: 0px;
}
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    padding:10px;
    background-color: #4C4C4C;
    color: white;
  }
</style>